<script lang="ts" setup>
import { ref, onUnmounted } from 'vue'
import CourseDetail from '@/components/courseVue/CourseDetail.vue';
import Student from '@/components/courseVue/Student.vue';
import Homework from '@/components/courseVue/Homework.vue';
import Communication from '@/components/courseVue/Communication.vue';
import useCourseStore from '@/stores/course';
// const activeName = ref('first');//活跃的标签页参数
const activeName = useCourseStore().activeName;
defineProps(['cid'])
</script>
<template>
    <div class="main">
        <el-tabs v-model="activeName" class="tabs">
            <el-tab-pane name="first">
                <template #label>
                    <span class="label">
                        <el-icon>
                            <Message />
                        </el-icon>
                        <span>课程信息</span>
                    </span>
                </template>
                <CourseDetail :cid="cid"></CourseDetail>
            </el-tab-pane>
            <el-tab-pane name="second">
                <template #label>
                    <span class="label">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>本班学生</span>
                    </span>
                </template>
                <Student :cid="cid"></Student>
            </el-tab-pane>
            <el-tab-pane name="third">
                <template #label>
                    <span class="label">
                        <el-icon>
                            <Memo />
                        </el-icon>
                        <span :cid="cid">作业管理</span>
                    </span>
                </template>
                <Homework :cid="cid"></Homework>
            </el-tab-pane>
            <!-- <el-tab-pane name="fourth">
                <template #label>
                    <span class="label">
                        <el-icon>
                            <ChatDotRound />
                        </el-icon>
                        <span>班级交流</span>
                    </span>
                </template>
                <Communication :cid="cid"></Communication>
            </el-tab-pane> -->
        </el-tabs>
    </div>
</template>

<style scoped>
.main {
    margin-left: 20px;
    margin-right: 20px;
}

.label .el-icon {
    vertical-align: middle;
}

.label span {
    vertical-align: middle;
    margin-left: 4px;
}
</style>
